<template>
  <el-container>
    <el-header height="72px" style="border-bottom: 1px solid #f5f5f5;">
      <div class="pg-header">
        <div class="logo">
          <h1>logo</h1>
        </div>

        <div v-if="name" @click="doLogout" class="top-menu">{{ name }}</div>
        <div v-else class="top-menu">
          <router-link :to="{name:'Login'}">
            <el-button>登录</el-button>
          </router-link>
          <router-link :to="{name:'Register'}">
            <el-button>注册</el-button>
          </router-link>
        </div>
      </div>
    </el-header>
    <router-view/>
  </el-container>

</template>

<style>
body {
    margin: 0;
}
.pg-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    height: 72px;
}

.pg-header .logo {
    height: 48px;
}

.pg-header .top-menu a {
  padding: 0 5px;
  text-decoration: none;
}


</style>
